<template>
  <view class="express-layout">
    <my-header title="查看物流"></my-header>
    <my-content class="content">
      <view class="box" v-if="expressData.length > 0">
        <view class="box_item" v-for="(item,index) in expressData" :key="index">
          <view class="top">
            <view class="goods-image-bg" :style="[useLevelBg('img', item.goods_level)]">
              <image class="goods-image" :src="item.goods_image"></image>
              <view class="goods-level"
                    :style="[useLevelBg('icon', item.goods_level)]">
                {{ item.level_name }}}
              </view>
            </view>
            <view class="goods-info">
              <view class="goods-status">{{ item.result[0].status }}</view>
              <view class="goods-name">
                <text>{{ item.goods_name }}</text>
                <text>x{{ item.goods_num }}</text>
              </view>
            </view>
          </view>
          <view class="header">
            <view class="express-info">
              <view class="express-label">快递单号：</view>
              <view class="express-value">{{ item.express_no }}
                <image src="/static/images/user/ic_copy.png" class="copy" @click="copy"></image>
              </view>
            </view>
            <view class="express-info">
              <view class="express-label">国内承运：</view>
              <view class="express-value">{{ item.express_name }}</view>
            </view>
          </view>
          <view class="express">
            <view class="express_item" v-for="(express,i) in item.result" :key="i">
              <view class="step">
                <view class="circle" :class="i == 0 ? 'active' : ''"></view>
                <view class="line" :class="i == 0 ? 'active' : ''"></view>
              </view>
              <view class="content_box">
                <view class="content" :class="i == 0 ? 'active' : ''">{{ express.status }}</view>
                <view class="time" :class="i == 0 ? 'active' : ''">{{ express.time }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </my-content>
  </view>

</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      id: '',
      expressData: [
        /*{
          express_no: '1234567890', ss_no: '1234567890',
          express_name: '顺丰',
          result: [
            {
              status: '已签收',
              time: '2020-01-01 12:00:00',
            },
            {
              status: '快件已到达江西转运中心',
              time: '2020-01-01 12:00:00',
            },
          ],
        }, {
          express_no: '1234567890', ss_no: '1234567890',
          express_name: '顺丰',
          result: [
            {
              status: '已签收',
              time: '2020-01-01 12:00:00',
            },
            {
              status: '快件已到达江西转运中心',
              time: '2020-01-01 12:00:00',
            },
          ],
        },*/
      ],
    }
  },
  onLoad(option) {
    this.id = option.id
    this.getExpress()
  },
  onShow() {

  },
  methods: {
    getExpress() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.orders.express(this.id).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          // this.expressData = res.data;
          console.log(this.expressData)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    copy(no) {
      uni.setClipboardData({
        data: `${no}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.express-layout {
  background-color: #141414;
  min-height: 100vh;
}

.box {
  display: flex;
  flex-direction: column;
  color: white;
  background-color: #1f1f1f;
  margin: 20rpx;

  .box_item {
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      padding: 30rpx;
      width: 100%;

      .goods-image-bg {
        width: 200rpx;
        height: 200rpx;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-size: 100% 100%;

        .goods-image {
          height: 170rpx;
          width: 170rpx;
        }

        .goods-level {
          position: absolute;
          left: 20rpx;
          top: 20rpx;
          width: 71rpx;
          height: 28rpx;
          font-size: 19rpx;
          font-family: 'youshe', serif;
          background-size: 100% 100%;
          padding-left: 27rpx;
          line-height: 28rpx;
          box-sizing: border-box;
        }
      }
    }

    .goods-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 20rpx;
      margin-right: 50rpx;

      .goods-name {
        font-size: 30rpx;
        color: #fff;
        display: flex;
        justify-content: space-between;
      }

      .goods-status {
        color: #DED000;
      }

    }

    .header {
      display: flex;
      flex-direction: column;
      padding: 0 30rpx;
      margin-bottom: 30rpx;
      font-size: 30rpx;

      .express-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60rpx;
        line-height: 60rpx;

        .express-label {
          color: #808080;
          font-size: 28rpx;
        }

        .express-value {
          .copy {
            width: 20rpx;
            height: 20rpx;
            margin-left: 10rpx;
          }
        }
      }

      .express_no {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .copy {
          background-color: #ccc;
          margin-left: 30rpx;
          padding: 0 10rpx;
          border-radius: 10rpx;
          font-size: 30rpx;
        }
      }
    }

    .express {
      display: flex;
      flex-direction: column;
      padding: 20rpx 30rpx;

      .express_item {
        display: flex;
        height: 130rpx;

        .step {
          display: flex;
          flex-direction: column;
          align-items: center;

          .circle {
            width: 30rpx;
            height: 30rpx;
            background-color: #808080;
            border-radius: 50%;

            &.active {
              background-color: #DED000;
            }
          }

          .line {
            flex: 1;
            width: 4rpx;
            background-color: #333333;

            &.active {
              /*background-color: #DED000;*/
            }
          }
        }

        .content_box {
          flex: 1;
          flex-direction: column;
          padding: 0 20rpx 20rpx 20rpx;

          .content {
            font-size: 28rpx;
            margin-bottom: 10rpx;
            color: #808080;

            &.active {
              color: #DED000;
            }
          }

          .time {
            color: #808080;
            font-size: 24rpx;

            &.active {
              color: #DED000;
            }
          }
        }

      }
    }
  }
}

</style>